<script setup lang="ts">
</script>

<template>
    <div class="Header">
        <h2>焦炉作业管理系统</h2>
        <div class="grid-content">
            <div data-v-c12095bf="" class="left-header"><button data-v-c12095bf="" aria-disabled="false" type="button"
                    class="el-button"><!--v-if--><span class="">系统总貌</span></button><button data-v-c12095bf=""
                    aria-disabled="false" type="button" class="el-button"><!--v-if--><span
                        class="">推焦计划</span></button><button data-v-c12095bf="" aria-disabled="false" type="button"
                    class="el-button"><!--v-if--><span class="">推焦实绩</span></button><button data-v-c12095bf=""
                    aria-disabled="false" type="button" class="el-button"><!--v-if--><span
                        class="">推焦报表</span></button><button data-v-c12095bf="" aria-disabled="false" type="button"
                    class="el-button"><!--v-if--><span class="">碳室设置</span></button>
            </div>
            <div data-v-c12095bf="" class="right-header"><button data-v-c12095bf="" aria-disabled="false" type="button"
                    class="el-button"><!--v-if--><span class="">系统设置</span></button><button data-v-c12095bf=""
                    aria-disabled="false" type="button" class="el-button"><!--v-if--><span
                        class="">日志记录</span></button><button data-v-c12095bf="" aria-disabled="false" type="button"
                    class="el-button"><!--v-if--><span class="">报警设置</span></button><button data-v-c12095bf=""
                    aria-disabled="false" type="button" class="el-button"><!--v-if--><span
                        class="">报警配置</span></button><button data-v-c12095bf="" aria-disabled="false" type="button"
                    class="el-button"><!--v-if--><span class="">退出系统</span></button>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.Header {
    height: 10vh;
    width: 100%;
    padding-top: .1px;
    h2 {
        text-align: center;
        position: relative;
        top: 20px;
        padding: 0 !important;
        margin: 0 !important;
        color: #fff;
    }

    .grid-content {
        display: flex;
        justify-content: space-between;
        padding: 0 90px;

        .left-header,
        .right-header {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            width: 590px;
        }

        .el-button {
            border-radius: 8px;
            border: 1px solid transparent;
            padding: .6em 1.2em;
            font-size: 1em;
            font-weight: 500;
            font-family: inheritinherit;
            background-color: #1a1a1a;
            cursor: pointer;
            transition: border-color .25s;
            color: #fff;
            background: #0000004d;
        }
    }


}
</style>
